<!--
 * @Description: 
 * @Author: 若城
 * @Date: 2023-03-28 16:40:54
 * @LastEditTime: 2023-03-30 10:51:15
-->
<template>
  <view>
    <u-gap height="15" bgColor="#fff"></u-gap>
    <view class="topImg">
      <u-image
        width="713rpx"
        height="794rpx"
        src="/static/gjj/gjjtoppng.png"
        mode="widthFix"
      ></u-image>
      <view class="userName">
        <text class="name">{{ userMsg.name }}</text>
        <text class="number">({{ userMsg.number }})</text>
      </view>
      <text class="moneyOne">{{ userMsg.balance }}</text>
      <text class="moneyTwo">{{ userMsg.month_balance }}</text>
      <text @click="handleAccount" class="accountMsg"></text>
    </view>
    <u-gap height="20" bgColor="#f1f1f1"></u-gap>
    <view class="mingxi">
      <u-image
        width="750rpx"
        height="74rpx"
        src="/static/gjj/title.png"
        mode="widthFix"
      ></u-image>
      <text class="firstDateNum">{{ firstDate }}</text>
      <text class="endDateNum">{{ endDate }}</text>
      <text class="firstDate" @click="handelFirst"></text>
      <text class="endDate" @click="handleEnd"></text>
    </view>
    <u-cell-group>
      <u-cell v-for="item in particulars" :key="item.id">
         <text class="dateTit" slot="title">{{item.name}}</text>
         <text class="dateCls" slot="label"> 记账日期{{item.date_time}}</text>
         <text class="dateMon" slot="value">{{item.money}}</text>

      </u-cell>
    </u-cell-group>
    <u-datetime-picker
      ref="datetimePicker"
      :show="showFirst"
      v-model="value1"
      mode="date"
      minDate="1577808000000"
      @confirm="confirm"
      @cancel="cancel"
      @close="cancel"
      :formatter="formatter"
      :closeOnClickOverlay="true"
    ></u-datetime-picker>
    <u-datetime-picker
      ref="datetimePicker"
      :show="showEnd"
      v-model="value2"
      minDate="1577808000000"
      mode="date"
      @confirm="confirmEnd"
      @cancel="cancel"
      @close="cancel"
      :formatter="formatter"
      :closeOnClickOverlay="true"
    ></u-datetime-picker>

    <view class="make">
        <view class="list">
            <view class="item" v-for="i in 500" :key="i">
                <text>{{userMsg.s_name}}</text>
            </view>
        </view>
    </view>
  </view>
</template>
<script>
import { getGJInfo, getGList } from "../../api/rc";
import { timestampToTime ,oldTimeDay} from "../../utils/utils";
export default {
  data() {
    return {
     
      showFirst: false,
      showEnd: false,
      timestampToTime,
      firstDate: oldTimeDay(),
      endDate: timestampToTime(Date.parse(new Date())),
      userMsg: {},
      particulars:[]
    };
  },
  mounted() {
    this.init();

  },
  onReady() {
    // 微信小程序需要用此写法
    this.$refs.datetimePicker.setFormatter(this.formatter);
  },
 
  methods: {
    async init() {
      await getGJInfo().then((res) => {
        console.log(
          "🚀 ~ file: reservedServe.vue:35 ~ awaitgetGJInfo ~ res:",
          res
        );
        this.userMsg = res.data[0];
      });
      this.getAllList();
    },
    formatter(type, value) {
      if (type === "year") {
        return `${value}`;
      }
      if (type === "month") {
        return `${value}`;
      }
      if (type === "day") {
        return `${value}`;
      }
      return value;
    },
    confirm(e) {
      this.firstDate = this.timestampToTime(e.value);
      this.getAllList();
    },
    confirmEnd(e) {
      this.endDate = this.timestampToTime(e.value);
      this.getAllList();
    },
    async getAllList() {
      const params = {
        start: this.firstDate,
        end: this.endDate,
      };
      await getGList(params).then((res) => {
        console.log(
          "🚀 ~ file: reservedServe.vue:119 ~ awaitgetGList ~ res:",
          res
        );
        this.particulars = res.data
      });
    },
    cancel() {
      this.showFirst = false;
      this.showEnd = false;
    },
    handelFirst() {
      this.showFirst = true;
    },
    handleEnd() {
      this.showEnd = true;
    },
    handleAccount(){
        uni.navigateTo({
        url: `/pages/reserved/accountMsg?username=${this.userMsg.s_name}`,
      });
    }
  },
};
</script>
<style lang="scss" scoped>
.accountMsg{
     position: absolute;
     width: 92rpx;
     height: 115rpx;
     left: 62rpx;
     bottom:238rpx ;
     background: #000;
     opacity: 0;
}
.mingxi {
  width: 750rpx;
  height: 74rpx;
  position: relative;
  .firstDate {
    position: absolute;
    width: 124rpx;
    height: 33rpx;
    // background: #000;
    top: 24rpx;
    right: 232rpx;
    z-index: 10;
  }
  .endDate {
    position: absolute;
    width: 124rpx;
    height: 33rpx;
    // background: #000;
    top: 24rpx;
    right: 30rpx;
    z-index: 10;
    font-size: 18rpx;
  }
  .firstDateNum {
    position: absolute;
    width: 124rpx;
    height: 33rpx;
    top: 24rpx;
    right: 232rpx;
    font-size: 20rpx;
    color: #166ccc;
  }
  .endDateNum {
    position: absolute;
    width: 124rpx;
    height: 33rpx;
    top: 24rpx;
    right: 30rpx;
    font-size: 20rpx;
    color: #166ccc;
  }
}
.topImg {
  width: 750rpx;
  //   margin: 0 auto;
  position: relative;
  display: flex;
  justify-content: center;
}
.moneyOne {
  font-size: 32rpx;
  font-weight: 800;
  color: #fff;
  position: absolute;
  top: 135rpx;
  left: 137rpx;
}
.moneyTwo {
  font-size: 32rpx;
  font-weight: 800;
  color: #fff;
  position: absolute;
  top: 135rpx;
  right: 140rpx;
}
.userName {
  position: absolute;
  top: 40rpx;
  left: 97rpx;
  color: #fff;
  .name {
    font-weight: 800;
    font-size: 30rpx;
  }
  .number {
    font-size: 19rpx;
    margin-left: 19rpx;
  }
}
.dateCls{
    color: #9b9b9b;
    font-size: 19rpx;
}
.dateTit{
    color: #252525;
    font-size:26rpx;
}
.dateMon{
    color: #2e2e2e;
    font-size: 22rpx;
}


.make {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 9999;
        background: rgba(0, 0, 0, 0);
        pointer-events: none;

        .list {
            width: 500%;
            height: 400%;
            position: absolute;
            top: -50%;
            left: -50%;
            transform: rotate(-45deg);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            pointer-events: none;

            .item {
                font-size: 20px;
                color: rgba(220, 220, 220, 0.3);
                font-weight: bold;
                padding: 30rpx;
                pointer-events: none;
            }
        }
    }
</style>